<template>
  <div class="app-container" id="analysis_jbb">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

<!--      <el-form-item label="月份">
        <el-select v-model="queryParams.month" placeholder="选择月份" style="width: 100px" clearable>
          <el-option v-for="item in month_range" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <span style="margin-left: 5px">月</span>
      </el-form-item>-->

      <el-form-item label="选择月份">
        <el-date-picker
          v-model="rangDate"
          type="monthrange"
          size="small"
          format="yyyy-MM"
          value-format="timestamp"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          @change="(value) => changeMonth(value, 'search')"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="筛查范围" prop="age">
        <el-select v-model="queryParams.age" placeholder="选择筛查范围" @change="selectItem($event)" clearable>
          <el-option
            v-for="age in age_range"
            :key="age.value"
            :label="age.text"
            :value="age.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="筛查方式" prop="type">
        <el-radio-group v-model="queryParams.type" @change="selectRadio($event)">
          <el-radio :label="1">门诊</el-radio>
          <el-radio :label="2">住院</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">分析</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>

<!--      <el-form-item>
        <el-button type="info" plain icon="el-icon-upload" size="mini" @click="openImportTable">导入</el-button>
      </el-form-item>-->
      <el-form-item>
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出季报表</el-button>
      </el-form-item>
    </el-form>

    <el-collapse v-model="activeNames">
      <el-collapse-item title="快速综合评估" name="1">
        <div style="margin-top: 0;">
          <el-divider content-position="left">衰弱筛查</el-divider>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-card shadow="hover" class="el-card">
                正常：
                <span class="plain">{{dataForm.kspg.sr_no}}</span>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover">
                衰弱前期：
                <span class="plain">{{dataForm.kspg.sr_qq}}</span>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover">
                衰弱：
                <span class="plain">{{dataForm.kspg.sr_sr}}</span>
              </el-card>
            </el-col>
          </el-row>

          <el-divider content-position="left">肌少症筛查</el-divider>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-card shadow="hover">
                正常：
                <span class="plain">{{dataForm.kspg.js_no}}</span>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover">
                低风险：
                <span class="plain">{{dataForm.kspg.js_di}}</span>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover">
                肌少症：
                <span class="plain">{{dataForm.kspg.js_js}}</span>
              </el-card>
            </el-col>
          </el-row>

          <el-divider content-position="left">营养筛查</el-divider>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-card shadow="hover">
                正常：
                <span class="plain">{{dataForm.kspg.yy_no}}</span>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover">
                低风险：
                <span class="plain">{{dataForm.kspg.yy_di}}</span>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover">
                低体重风险：
                <span class="plain">{{dataForm.kspg.yy_xj}}</span>
              </el-card>
            </el-col>
          </el-row>

          <el-divider content-position="left">认知筛查</el-divider>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-card shadow="hover">
                正常：
                <span class="plain">{{dataForm.kspg.rz_no}}</span>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover">
                轻度认知障碍：
                <span class="plain">{{dataForm.kspg.rz_qd}}</span>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover">
                痴呆：
                <span class="plain">{{dataForm.kspg.rz_cd}}</span>
              </el-card>
            </el-col>
          </el-row>

          <el-divider content-position="left">抑郁筛查</el-divider>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-card shadow="hover">
                不抑郁：
                <span class="plain">{{dataForm.kspg.yu_no}}</span>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover">
                不确定：
                <span class="plain">{{dataForm.kspg.yu_bd}}</span>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover">
                抑郁：
                <span class="plain">{{dataForm.kspg.yu_yu}}</span>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
      <el-collapse-item title="实验室衰弱筛查" name="2">
        <el-row :gutter="12">
          <el-col :span="6">
            <el-card shadow="hover">
              正常：
              <span class="plain">{{dataForm.syssc.sys_zc}}</span>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              衰弱前期：
              <span class="plain">{{dataForm.syssc.sys_srqq}}</span>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              衰弱：
              <span class="plain">{{dataForm.syssc.sys_sr}}</span>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              肌少症：
              <span class="plain">{{dataForm.syssc.sys_jsz}}</span>
            </el-card>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="老年综合评估" name="3">
        <el-row :gutter="12">
          <el-col :span="6">
            <el-card shadow="hover">
              正常：
              <span class="plain">{{dataForm.kspg.lnpg_no}}</span>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              衰弱：
              <span class="plain">{{dataForm.kspg.lnpg_sr}}</span>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              重度衰弱：
              <span class="plain">{{dataForm.kspg.lnpg_zdsr}}</span>
            </el-card>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="每月结案数" name="4">
        <el-row :gutter="12">
          <el-col :span="8">
            <el-card shadow="hover">
              衰弱前期：
              <span class="plain">{{dataForm.syssc.sf_srqq}}</span>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              衰弱：
              <span class="plain">{{dataForm.syssc.sf_sr}}</span>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              肌少症：
              <span class="plain">{{dataForm.syssc.sf_jsz}}</span>
            </el-card>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>

    <div style="margin-top: 40px">
      <el-row :gutter="20">
      <el-col :span="6">
        <div>
          <el-statistic title="快速综合评估" :value="dataForm.kspg.kspgTotal"></el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic title="实验室衰弱筛查" :value="dataForm.syssc.jszTotal"></el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic  title="老年综合评估" :value="dataForm.kspg.lnpgTotal"></el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic title="每月结案数" :value="dataForm.syssc.sfTotal"></el-statistic>

        </div>
      </el-col>
    </el-row>
    </div>
  </div>

</template>

<script>


import { listAnalysis } from '@/api/his/analysis'
import { tansParams } from '@/utils/ruoyi'
import axios from 'axios'
import { getToken } from '@/utils/auth'
import { getUserProfile } from '@/api/system/user'
import { getDictsValues } from "@/api/system/dict/data";

export default {
  name: 'analysis_jbb',

  data(){
    return {
      title: "筛查季报表",
      rangDate:'',
      queryParams: {
        startTime:'',
        endTime:'',
        startYear:'',
        endYear:'',
        age:null,
        type:null,
        isSeason:false,
        season:0,
        year:'',
      },
      form:{
        unit:'',
        deptId:''
      },
      analysisForm:{
      },
      dataForm:{
        kspg:{
          //衰弱，肌少症，营养，抑郁，认知
          srTotal: 0,
          jsTotal: 0,
          yyTotal: 0,
          yuTotal: 0,
          rzTotal: 0,
          //衰弱
          sr_no: 0,
          sr_qq: 0,
          sr_sr : 0,
          //肌少症
          js_no: 0,
          js_di: 0,
          js_js: 0,
          //营养
          yy_no: 0,
          yy_di: 0,
          yy_xj: 0,
          //抑郁
          yu_no: 0,
          yu_bd: 0,
          yu_yu: 0,
          //认知
          rz_no: 0,
          rz_qd: 0,
          rz_cd: 0,
          //快速综合评估总数
          kspgTotal:0,

          //老年综合评估
          lnpg_no:0,
          lnpg_sr:0,
          lnpg_zdsr:0,
          lnpgTotal:0,
        },
        syssc:{
          //实验室筛查,结案
          sys_jsz:0, // 肌少症
          sys_srqq:0, //衰弱前期
          sys_sr:0, //衰弱
          sys_zc:0, //正常
          jszTotal:0, //肌少症筛查
          //结案
          sf_srqq:0,
          sf_sr:0,
          sf_jsz:0,
          sfTotal:0,
        }
      },
      activeNames: ['1','2','3','4'],
      // 显示搜索条件
      showSearch: true,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      age_range: [
        {text:'>20岁',value:20},
        {text:'>60岁',value:60},
        {text:'>75岁',value:75},
        //{text:'门诊',value:1},
        //{text:'住院',value:2},
      ],
      month_range:[],
    }
  },

  created() {
    //this.init()
    this.getUser();
  },
  methods: {
    selectRadio(){
      //console.log(this.queryParams.type,'type')
      this.queryParams.age = null;
    },
    selectItem(){
      //console.log(this.queryParams.age,'age')
      this.queryParams.type = null;
    },
    changeMonth(value, str){
      //查询当前月份月初到月末
      /* let myDate = new Date(value[1]);
      let month = myDate.getMonth() + 1;
      month = month < 10 ? "0" + month : month;   //格式化月份，补0
      let dayEnd = new Date(myDate.getFullYear(), month, 0).getDate(); //获取当月一共有多少天
      //this.queryParams.rangDate = [value[0], value[1] + (dayEnd - 1) * 86400000]
      //this.queryParams.rangDate = [value[0], value[1]]
      console.log(value[0],'开始')
      console.log(value[1] + (dayEnd - 1) * 86400000,'结束') */

      let myDate1 = new Date(value[0]);
      let myYear1 = myDate1.getFullYear();
      let month1 = myDate1.getMonth()+1;
      let myDate2 = new Date(value[1]);
      let month2 = myDate2.getMonth()+1;
      let myYear2 = myDate2.getFullYear();

      this.queryParams.year = myYear2 || myYear1;
      this.queryParams.startTime = myYear1+'-'+month1;
      this.queryParams.endTime = myYear2+'-'+ (parseInt(month2)+1);

      this.queryParams.startYear = myYear1;
      this.queryParams.endYear = myYear2;

      //是否按季度选择日期 1-3,4-6,7-9,10-12
      /* if(month1==1 || month1==4 || month1==7 || month1==10){
            //是否满足三个月
            if(month2-month1==2){
                this.queryParams.isSeason = true;
            }else{
              this.$modal.msgWarning("请选择正确的时间范围");
            }
      }else{
        this.$modal.msgWarning("请选择正确的时间范围");
      } */

      if(month1==1){
        this.queryParams.season = 1; //第一季
      }else if(month1==4 ){
        this.queryParams.season = 2; //第二季
      }else if(month1==7 ){
        this.queryParams.season = 3; //第三季
      }else if(month1==10 ){
        this.queryParams.season = 4; //第四季
      }

    },

    init() {
      let myData = new Date() //获取当前日期
      let month = myData.getMonth() + 1 //获取当前月份
      let day = myData.getDate() //获取当天日期
      this.initSelectMonth(month) // 调用initSelectMonth方法，初始化月份选项
    },

    //初始化月份选项
    initSelectMonth(month) {
      this.queryParams.month = month;
      this.month = []
      for (let i = 1; i <= 12; i++) {
        this.month_range.push({ value: i, label: i })
      }
    },

    /** 分析操作 */
    handleQuery() {
      //console.log('queryParma',JSON.stringify(this.queryParams))
      this.getAnalysis();
    },
    getAnalysis(){
      if(this.queryParams.startYear!==this.queryParams.endYear){
        this.$modal.msgWarning("请选择同一年时间范围");
      }

      this.loading = true;
      if(this.queryParams.startTime!='' && this.queryParams.endTime!=''){
        listAnalysis(this.queryParams).then(response => {
          this.dataForm.kspg = response.kspg;
          this.dataForm.syssc = response.syssc;
          this.loading = false;
        });
      }else{
        this.$modal.msgWarning("请选择时间范围");
      }
    },
    async handleExport() {
      if (this.queryParams.startTime != '' && this.queryParams.endTime != '') {
        const loading = this.$loading({
          lock: true,
          text: '下载中，请稍后...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.2)'
        });

        let myData = new Date() //获取当前日期
        let year = myData.getFullYear()
        const baseURL = process.env.VUE_APP_BASE_API;
        const api = '/his/analysis/export';
        var rangeTime = this.queryParams.startTime+','+this.queryParams.endTime+','+this.queryParams.season+','+this.queryParams.year +',' +this.form.deptId;
        var url = baseURL + api
        axios({
          method: 'post',
          url: url,
          responseType: 'blob',
          params: { rangeTime: rangeTime }, //{jsonParam:this.dataForm.kspg},
          headers: { Authorization: "Bearer " + getToken() },
        }).then(res => {
            loading.close();
            const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
            let href = URL.createObjectURL(blob)
            window.open(href)
          }
        )
      } else {
        this.$modal.msgWarning("请选择时间范围");
      }
    },

    openImportTable(){
      this.$modal.msg("功能在开发中,敬请期待...")
    },
    /** 重置操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.month = '';
    },
    getUser() {
      getUserProfile().then(response => {
        this.form.unit = response.data.dept.deptName;
        getDictsValues('his_ins_dep').then(response => {
              response.data.forEach((self,index) => {
                if(self.dictLabel==this.form.unit){
                  this.form.deptId = self.dictValue+','+this.form.unit
                }
          });
        })



      });
    }
  }
}
</script>

<style lang="scss">
#analysis_jbb .el-collapse-item__header{
  color: #409EFF !important;
  font-size: 15px !important;
}
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
#analysis_jbb .plain{
  color: #409EFF !important;
  font-size: 17px;
}

#analysis_jbb .el-card__body {
  padding: 0 0 0 10px !important;
  color:sandybrown !important;
}
#analysis_jbb .el-collapse-item__content {
  padding-bottom:10px !important;
}
#analysis_jbb .el-card{
  border: none !important;
}
#analysis_jbb .el-divider__text {
  padding: 0 10px !important;
}

</style>
